<template>
	<view class="container">
		<view class="notice-list" v-if="notices.length > 0">
			<view class="notice-item" v-for="(item, index) in notices" :key="item.noticeId"
				:class="{ 'unread': !item.isRead }" @click="markAsRead(item, index)" v-if="item.noticeType == 1">
				<view class="notice-content" @click="dialogToggle(item)">
					<view class="notice-title">
						<text class="title-text">{{ item.noticeTitle }}</text>
						<view class="unread-dot" v-if="!item.isRead"></view>
					</view>
					<view class="notice-meta">
						<text class="notice-time">{{ item.createTime }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="notice-emty" v-else>
			<text class="tips">暂无通知~</text>
		</view>


		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="center">
			<uni-popup-dialog type="success" cancelText="关闭" confirmText="确认" :title="currentTitle"
				:content="stripHtmlTags(currentNotice)"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getNoticeList
	} from '@/api/notice.js'

	export default {
		data() {
			return {
				notices: [],
				currentNotice: null,
				currentTitle: null
			}
		},
		computed: {
			unreadCount() {
				return this.notices.filter(item => !item.isRead).length
			}
		},
		methods: {
			async getNotices() {
				try {
					const res = await getNoticeList()
					// 为每个通知添加isRead状态，默认为未读
					this.notices = (res.data || []).map(item => ({
						...item,
						isRead: this.getReadStatus(item.noticeId),
					}))
					console.log(this.notices)
				} catch (error) {
					console.error('获取通知列表失败:', error)
					this.notices = []
				}
			},
			markAsRead(item, index) {
				if (!item.isRead) {
					this.notices[index].isRead = true
					this.saveReadStatus(item.noticeId)
				}
			},

			getReadStatus(noticeId) {
				const readNotices = uni.getStorageSync('readNotices') || []
				return readNotices.includes(noticeId)
			},
			saveReadStatus(noticeId) {
				const readNotices = uni.getStorageSync('readNotices') || []
				if (!readNotices.includes(noticeId)) {
					readNotices.push(noticeId)
					uni.setStorageSync('readNotices', readNotices)
				}
			},
			stripHtmlTags(html) {
				if (!html) return ''
				return html.replace(/<[^>]*>/g, '')
			},
			dialogToggle(notice) {
				this.currentNotice = notice.noticeContent
				this.currentTitle = notice.noticeTitle
				this.$refs.alertDialog.open()
			},


		},
		mounted() {
			this.getNotices()
		},
	}
</script>

<style lang="less" scoped>
	.container {
		.notice-list {
			padding: 20rpx;
		}

		.notice-item {
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			padding: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;

			&.unread {
				border-left: 6rpx solid #3c96f3;
				background-color: #f8fbff;
			}

			&:active {
				transform: scale(0.98);
			}
		}

		.notice-content {
			.notice-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;

				.title-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					flex: 1;
				}

				.unread-dot {
					width: 16rpx;
					height: 16rpx;
					background-color: #ff4757;
					border-radius: 50%;
					margin-left: 16rpx;
				}
			}

			.notice-desc {
				margin-bottom: 20rpx;

				.desc-text {
					font-size: 28rpx;
					color: #666;
					line-height: 1.5;
				}
			}

			.notice-meta {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.notice-time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.notice-emty {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 450rpx;

			.tips {
				font-size: 35rpx;
			}
		}
	}
</style>